<template>
  <div class="page light">
    <div class="page-main-no2">
      <div class="ksd-xqui-body">
        <div class="xquimini-content-page" style="height: calc(100% - 36px)">
          <div class="xquimini-container xquimini-page-anim">
            <div class="xquimini-main">
              <div class="pug-card">
                <div class="pug-card-body">
                  <div class="pug-form pug-form-inline">
                    <div class="standardFormRow___2SuxW standardFormRowBlock___25ip_" style="padding-bottom:11px;">
                      <div class="label___2igWv"><span>所属类目</span></div>
                      <div class="content___v8hLk">
                        <div class="pug-row pug-form-item" style="row-gap:0px;">
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <div class="tagSelect___lC4Pt hasExpandTag___2bftZ">
                                  <span @click.prevent="searchByCid(-1)" class="pug-tag"
                                        :class="[cindex==-1?'pug-tag-checkable':'']">全部</span>
                                  <span @click.prevent="searchByCid(index)" v-for="(item,index) in citems"
                                        :key="item.id"
                                        class="pug-tag" :class="[cindex==index?'pug-tag-checkable':'']">{{ item.name }}</span>

                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="standardFormRow___2SuxW standardFormRowLast___3ZKmo standardFormRowGrid___TWpoF">
                      <div class="content___v8hLk">
                        <div class="pug-row" style="margin-left: -8px; margin-right: -8px; row-gap: 0px;">
                          <div class="pug-col "
                               style="padding-left: 8px; padding-right: 8px;">
                            <div class="xqui-inline" style="padding-left: 8px; padding-right: 8px; padding-top: 2px;">
                            <label class="xqui-form-label">关键词</label>
                              <div class="xqui-input-inline"><input autocomplete="off" v-model.trim="keyword"
                                                                    class="xqui-input" type="text">
                              </div>
                            </div>
                            <div class="xqui-inline">
                              <button @click.prevent="searchData" class="xqui-btn xqui-btn-primary"
                                      lay-filter="data-search-btn" lay-submit="" type="submit">搜 索
                              </button>
                              <button class="xqui-btn xqui-btn-primary" @click.prevent="searchRush"
                                      lay-filter="data-search-btn" lay-submit="" type="submit">回收站
                              </button>
                              <button class="xqui-btn xqui-btn-primary" @click.prevent="delBatch"
                                      lay-filter="data-search-btn" lay-submit="" type="submit">批量删除
                              </button>

                              <router-link to="/craetion/add">
                                <button class="xqui-btn xqui-btn-primary" style="margin-left: 10px;"
                                        lay-filter="data-search-btn" lay-submit="" type="submit">
                                  <i class="iconfont icon-tianjia1"></i> 添加文章
                                </button>
                              </router-link>

                            </div>
                          </div>
                          <div class="pug-col pug-col-xs-24 pug-col-sm-24 pug-col-md-12 pug-col-lg-10 pug-col-xl-8"
                               style="padding-left: 8px; padding-right: 8px;">
                            <div class="pug-row pug-form-item" style="row-gap: 0px;">
                              <div class="pug-col pug-form-item-label"><label class=""
                                                                              title="活跃用户">发布状态</label></div>
                              <div class="pug-col pug-form-item-control pug-col-xs-24 pug-col-sm-24 pug-col-md-12">
                                <div class="pug-form-item-control-input">
                                  <div class="pug-form-item-control-input-content">
                                    <pug-select :items="statusItems" @change="searchByStatus"></pug-select>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="xqui-form xqui-border-box xqui-table-view">
                <div class="xqui-table-box">
                  <div class="xqui-table-header">
                    <table border="0" cellpadding="0" cellspacing="0" class="xqui-table" lay-skin="line">
                      <thead>
                      <tr>
                        <th class=" xqui-table-col-special" data-field="0" data-key="1-0-0" data-unresize="true">
                          <div class="xqui-table-cell laytable-cell-checkbox" @click="selectAll"><input
                            lay-filter="layTableAllChoose"
                            lay-skin="primary"
                            name="layTableCheckbox"
                            type="checkbox">
                            <div class="xqui-unselect xqui-form-checkbox" lay-skin="primary"><i
                              class="xqui-icon" v-bind:class="[allchecked?'xqui-icon-ok':'']"></i></div>
                          </div>
                        </th>
                        <th class=" xqui-unselect" data-field="id" data-key="1-0-1">
                          <div class="xqui-table-cell"><span>ID</span></div>
                        </th>
                        <th class=" xqui-unselect" data-field="id" data-key="1-0-1">
                          <div class="xqui-table-cell"><span>标题</span></div>
                        </th>
                        <th class=" xqui-unselect" data-field="id" data-key="1-0-1">
                          <div class="xqui-table-cell"><span>分类</span></div>
                        </th>
                        <th class="" data-field="username" data-key="1-0-2">
                          <div class="xqui-table-cell"><span>浏览数/收藏数</span></div>
                        </th>
                        <th class="" data-field="username" data-key="1-0-2">
                          <div class="xqui-table-cell"><span>创建时间</span></div>
                        </th>
                        <th class="" data-field="username" data-key="1-0-2">
                          <div class="xqui-table-cell"><span>发布状态</span></div>
                        </th>
                        <th class="" data-field="username" data-key="1-0-2">
                          <div class="xqui-table-cell"><span>删除状态</span></div>
                        </th>
                        <th class=" xqui-table-col-special" data-field="10" data-key="1-0-10" data-minwidth="150">
                          <div align="center" class="xqui-table-cell"><span>操作</span></div>
                        </th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr :key="item.id" class="" data-index="0" v-for="(item , index) in items">

                        <td class="xqui-table-col-special" data-field="0" data-key="1-0-0">
                          <div class="xqui-table-cell laytable-cell-checkbox" @click="changeChecked(index)"><input
                            lay-skin="primary"
                            name="layTableCheckbox"
                            type="checkbox">
                            <div class="xqui-unselect xqui-form-checkbox" lay-skin="primary"><i
                              class="xqui-icon" :class="[item.checked?'xqui-icon-ok':'']"></i></div>
                          </div>
                        </td>
                        <td class="" data-field="id" data-key="1-0-1">
                          <div class="xqui-table-cell">{{(index+1)+(pageSize*pageNo)-pageSize}}</div>
                        </td>
                        <td class="" data-field="username" data-key="1-0-2">
                          <div class="xqui-table-cell"><a href="#" :title="item.name" target="_blank">
                            {{item.name}}
                          </a></div>
                        </td>
                        <td class="" data-field="sex" data-key="1-0-3">
                          <div class="xqui-table-cell">{{ item.categoryName }}</div>
                        </td>
                        <td class="" data-field="city" data-key="1-0-4">
                          <div class="xqui-table-cell">{{ item.views }}/{{ item.collections }}</div>
                        </td>
                        <td class="" data-field="city" data-key="1-0-4">
                          <div class="xqui-table-cell">{{ item.createTime }}</div>
                        </td>
                        <td class="" data-field="city" data-key="1-0-4" >
                          <div class="xqui-table-cell" :style="{'color':[item.status ==1?'green':'red']}">
                            {{ item.status == 1 ? "审核通过" : "审核中" }}
                          </div>
                        </td>
                        <td class="" data-field="city" data-key="1-0-4" @click="updateRelation(index,'isdelete')">
                          <div class="xqui-table-cell" :style="{'color':[item.isdelete ==1?'green':'red']}">
                            {{ item.isdelete == 1 ? "删除" : "未删除" }}
                          </div>
                        </td>
                        <td data-field="10" data-key="1-0-10" align="center" data-off="true" data-minwidth="150"
                            class="xqui-table-col-special">
                          <div class="xqui-table-cell">
                            <router-link :to="'/craetion/edit/'+item.id" v-if="item.isdelete==0"
                                         class="xqui-btn xqui-btn-normal xqui-btn-xs data-count-edit" lay-event="edit">
                              <i
                                class="iconfont icon-bianji"></i>编辑
                            </router-link>

                            <a @click.prevent="deleteItem(index)" v-if="item.isdelete==0"
                               class="xqui-btn xqui-btn-xs xqui-btn-danger data-count-delete" lay-event="delete"><i
                              class="iconfont icon-remove2"></i>删除</a>
                            <a @click.prevent="updateRelation(index,'isdelete')" v-if="item.isdelete==1"
                               class="xqui-btn xqui-btn-xs xqui-btn-danger data-count-delete" lay-event="delete"><i
                              class="iconfont icon-remove2"></i>恢复</a>
                          </div>
                        </td>
                      </tr>
                      </tbody>
                      <tfoot>
                      <tr>
                        <td colspan="20">
                          <div class="text-center ksd-empty" v-if="total == 0"><i
                            class="iconfont icon-zanwu2" style="font-size: 132px;color:#ddd;"></i> <br>
                            <span>暂无数据</span></div>
                        </td>
                      </tr>
                      </tfoot>
                    </table>
                  </div>
                </div>
                <div class="xqui-table-page">
                  <pug-page
                    :page-index="pageNo"
                    :total="total"
                    :page-size="pageSize"
                    @change="pageChange">
                  </pug-page>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import articleService from '@/services/article'
import categoryService from '@/services/articlecategory'
import PugPage from '@/components/page/PugPage'
import pugDialog from "@/plugins/PugDialog";
import pugMessage from "@/plugins/PugMessage";
import {isEmpty} from "@/utils/validate";

export default {
  name: "Course.vue",
  components: {
    PugPage
  },
  data() {
    return {
      pageNo: 1 //当前页码
      , pageSize: 10 //每页显示20条数据
      , total: 0 //总记录数
      , pages: 0//总页数
      , categoryId: ""//按照分类进行搜索
      , keyword: ""//搜索关键词
      , isDelete: 0//删除状态
      , status: ""//发布状态
      , sortFlag: false//排序字段
      , allchecked: false // 控制全选和反选
      , items: [] // 装载数据的容器
      , citems: [] // 装载数据的分类的
      , cindex: -1 // 用控制选择分类的选中和激活
      , statusItems: [{text:"请选择",value:""},{text:"发布中",value:"1"},{text:"未发布",value:"0"}] // 用控制选择分类的选中和激活
      , batchIds: [] // 装在批量删除的ids
    }
  },
  created() {
    // 页面加载执行初始化数据查询
    this.loadData();
    // 页面加载执行分类数据的初始化
    this.loadCategoires();
  },
  methods: {
    loadCategoires() {
      categoryService.findArticleCategories2().then(res => {
        this.citems = res.data;
      })
    },
    // 1: 查询产品列表分页数据
    loadData() {
      // 参数
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        isDelete: this.isDelete,
        keyword: this.keyword,
        status: this.status,
        categoryId: this.categoryId,
      };
      // 发起异步请求
      articleService.findArticleMy(params).then(res => {
        // res.data 是完整的分页数据 -----R ---{data:""}
        const {total, pages, records} = res.data;
        // 分页要进行渲染
        this.total = total;
        // 总页数，后续可以判断边界
        this.pages = pages;
        // 具体产品数据 , js灵活性，可以动态增加对象的属性,避免服务器端增加字段。控制每个元素自身选中和不选中的问题
        records.forEach(item => item.checked = false);
        this.items = records;
      })
    },

    // 2 ：搜索
    searchData() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.pages = 0;
      this.isDelete = 0;
      this.items = [];
      //请注意千万不清空 keyword
      this.loadData();
    },

    // 根据分类搜索
    searchByCid(index) {
      this.cindex = index;
      this.categoryId = index != -1 ? this.citems[index].id : "";
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.pages = 0;
      this.isDelete = 0;
      this.items = [];
      //请注意千万不清空 keyword
      this.loadData();
    },

    // 根据状态搜索
    searchByStatus(item){
      this.status = item.value;
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.pages = 0;
      this.isDelete = 0;
      this.items = [];
      //请注意千万不清空 keyword
      this.loadData();
    },

    //3：查询回收站
    searchRush() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.pages = 0;
      this.isDelete = 1;
      this.items = [];
      //请注意千万不清空 keyword
      this.loadData();
    },

    // 4 : 删除
    deleteItem(index) {

      // 根据id在数据中查询对应位置的索引 ------------- 逻辑删除
      const id = this.items[index].id;
      pugDialog.confirm("删除提示", "你确定删除吗?", {time: 10, sureText: "删除产品", closeText: "关闭"}).then(() => {
        articleService.saveUpdateArticle2({id: id, isdelete: 1}).then(res => {
          if (res.status == 200) {
            // 删除成功，直接把数据重新查询一次
            this.items.splice(index, 1);
            // 如果当前页删除完毕，查询查询一次。
            if (this.items.length == 0) {
              this.loadData();
            }
          }
        })
      });


      // // 根据id在数据中查询对应位置的索引 -------------物理删除
      // const id = this.items[index].id;
      // pugDialog.confirm("删除提示", "你确定删除吗?", {time: 10, sureText: "删除产品", closeText: "关闭"}).then(() => {
      //   articleService.delArticle(id).then(res => {
      //     if (res.data == true) {
      //       // 删除成功，直接把数据重新查询一次
      //       this.items.splice(index, 1);
      //       // 如果当前页删除完毕，查询查询一次。
      //       if (this.items.length == 0) {
      //         this.loadData();
      //       }
      //     }
      //   })
      // });
    },

    // 5: 批量删除
    delBatch() {
      // 这种字符串逗号分隔一定数字，文本json
      // 调用数组的join方法，把数组根据你指定的分割符转换成字符串，比如:
      var batchIds = this.batchIds.join(",");
      if (isEmpty(batchIds)) {
        pugMessage.warn("请选择删除的数据!!!");
        return;
      }
      // 调用服务器段的批量删除
      pugDialog.confirm("删除提示", "你确定删除吗?", {time: 10, sureText: "删除产品", closeText: "关闭"}).then(() => {
        articleService.delBatchArticle(batchIds).then(res => {
          if (res.status == 200) {
            this.loadData();
          }
        })
      });
    },

    // // 6：点击价格排序
    // sortPrice() {
    //   this.sortFlag = !this.sortFlag;
    //   this.items.sort((a, b) => {
    //     return this.sortFlag ? b.realprice - a.realprice : a.realprice - b.realprice;
    //   })
    // },

    // 7: 修改状态控制 , js对象基础 --- person.status / person
    updateRelation(index, field) {
      // 状态控制
      const changeVal = this["items"][index][field] == 1 ? 0 : 1;
      // 修改
      const id = this.items[index].id;
      var params = {id: id};
      params[field] = changeVal;
      articleService["saveUpdateArticle2"](params)["then"](res => {
        if (res.status == 200) {
          pugMessage["success"]("修改成功");
          this.items[index][field] = changeVal;
        }
      })
    },

    changeChecked(index) {
      // 1: 开关
      this.items[index].checked = !this.items[index].checked;
      // 2 : 所有元素的个数
      var len = this.items.length;
      // 3： 选中元素的个数
      var clen = this.items.filter(item => item.checked).length;
      // 4: 拿选中元素的个数和所有元素的个数比较，如果相等说明全部选中了
      var flag = len == clen;
      // 5: 把顶部复选框选中
      this.allchecked = flag;
      // 赋值相关
      var selectId = this.items[index].id;
      // 查询元素是否存在数组中，如果存在返回元素所在数组的位置，如果找不到返回 -1
      var selectIndex = this.batchIds.findIndex((item) => item == selectId);
      // 如果返回是-1 ,说明不存在数组中，
      if (selectIndex == -1) {
        // 那么就添加数组
        this.batchIds.push(selectId);
      } else {
        // 如果存在，说明用户取消选中，就要元素从数组中剔除（删除）
        this.batchIds.splice(selectIndex, 1);
      }
    },

    selectAll() {
      // 1: 自身开关
      this.allchecked = !this.allchecked;
      // 2: 开关影响元素 自身求反，真变成假， 假变成真
      //this.items.map(item => item.checked = !item.checked);
      this.items.map(item => item.checked =  this.allchecked); // 2: 开关影响元素 自身求反，要么全真， 要么全假
      // 3: 取值相关
      var selectItems = this.items.filter(item => item.checked);
      // 每次操作清楚一次，把上次的累加进去。就不正确
      this.batchIds = [];
      selectItems.forEach(item => {
        this.batchIds.push(item.id);
      });
    },

    //从page组件传递过来的当前page
    pageChange(page) {
      this.pageNo = page
      this.loadData();
    }
  }
}
</script>

<style scoped>


</style>
